<template>
  <div>
    <el-container class="container">
      <!-- 这些不是标签,都是子组件,aside是container的子组件,属性相当给子组件传递一个参数 -->
      <el-aside width="200px">
        <div class="logo">
          <h2><i class="el-icon-xyboke"></i>个人博客</h2>
        </div>
        <el-menu
          router
          default-active="/home/dashboard"
          active-text-color="#9fa0b8"
        >
          <el-menu-item index="/home/dashboard">
            <i class="el-icon-s-home"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-menu-item index="/home/category">
            <i class="el-icon-s-grid"></i>
            <span slot="title">分类管理</span>
          </el-menu-item>
          <el-submenu index="/home/article">
            <!-- 插槽 -->
            <template slot="title">
              <i class="el-icon-s-cooperation"></i>
              <span>文章管理</span>
            </template>
            <el-menu-item index="/home/article">
              <i class="el-icon-xywenzhangliebiao"></i>
              <span slot="title">文章列表</span>
            </el-menu-item>
            <el-menu-item index="/home/article/add">
              <i class="el-icon-xyxinzengwenzhang"></i>
              <span slot="title">新增文章</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="/home/complain">
            <i class="el-icon-xytousu"></i>
            <span slot="title">投诉建议管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <div class="login">
              <h2>
                <i
                  class="el-icon-user-solid"
                  style="padding: 10px 10px 10px 10px"
                >
                </i>
                个人中心
              </h2>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="change"
                >修改密码</el-dropdown-item
              >
              <el-dropdown-item @click.native="logout"> 退出 </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-header>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'home',
  methods: {
    logout() {
      localStorage.removeItem('user')
      this.$router.push('/login')
    },
    change() {
      this.$router.push('/home/change')
    },
  },
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100vh;
}
.el-aside {
  background-color: #c1c2d3;
}
.el-header {
  background-color: #c1c2d3;
}

.el-main {
  background-color: rgb(245, 243, 241);
  /* background-image: url('../assets/images/bg-blog.jpg'); */
  /* background-size: cover; */
}

.logo {
  height: 60px;
}
.logo h2 {
  background-color: #9fa0b8;
  /* background-color: #c1c2d3; */
  font-weight: 400;
  line-height: 60px;
  text-align: center;
  color: #666;
}
.login {
  font-weight: 400;
  line-height: 60px;
  text-align: center;
}
</style>
